<template>
    <n-card class="tag-item" size="small">
        <template #header>
            <n-tag :bordered="false" size="large" type="primary">{{ tag.name }}</n-tag>
        </template>
        <n-ellipsis :line-clamp="3" :tooltip="false" expand-trigger="click" style="max-width: 100%">
            {{ tag.description }}
        </n-ellipsis>
        <template #footer>
            <div class="tag-item-footer">
                <n-text depth="3">{{ tag.count }} 篇内容</n-text>
                <div>
                    <n-button v-if="userStore.token" :quaternary="true" size="small" type="info"
                              @click="showModal = true">修改
                    </n-button>
                    <n-popconfirm
                        @positive-click="handleRemove"
                        v-if="userStore.role >= 3"
                    >
                        <template #trigger>
                            <n-button :quaternary="true" size="small" type="error">删除</n-button>
                        </template>
                        此操作无法撤回，请慎重！
                    </n-popconfirm>
                </div>
            </div>
        </template>
        <n-modal v-model:show="showModal" :bordered="false" preset="card" size="huge" style="width: 600px" title="编辑">
            <n-form
                ref="formRef"
                :model="tag"
                :rules="rules"
                :style="{maxWidth: '640px'}"
                label-placement="left"
                label-width="auto"
                require-mark-placement="right-hanging"
            >
                <n-form-item label="标签名" path="name">
                    <n-input v-model:value="tag.name" placeholder="请输入名称"/>
                </n-form-item>
                <n-form-item label="描述" path="description">
                    <n-input
                        v-model:value="tag.description"
                        :autosize="{ minRows: 3, maxRows: 5 }"
                        placeholder="描述一下标签"
                        type="textarea"
                    />
                </n-form-item>
            </n-form>
            <template #footer>
                <n-button size="large" type="primary" @click="handleSubmit">提交修改</n-button>
            </template>
        </n-modal>
    </n-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { removeTag, updateTag } from '../api/tag'
import { useMessage } from 'naive-ui'
import { useUserStore } from '../store/user'

const userStore = useUserStore()
const props = defineProps({
    tag: Object,
})
const emit = defineEmits(['updateTags'])
const message = useMessage()
onMounted(() => {
        tag.value = { ...props.tag }
    },
)
const showModal = ref(false)
const tag = ref({
    id: null,
    name: '',
    description: '',
})
const rules = {
    name: {
        required: true,
        message: '标签名不能为空',
        trigger: 'blur',
    },
}
const handleSubmit = () => {
    updateTag(tag.value.id, tag.value).then(res => {
        if (res.code === '200') {
            emit('updateTags')
            showModal.value = false
            message.success('修改成功！')
        }
    })
}
const handleRemove = () => {
    removeTag(tag.value.id).then(res => {
        if (res.code === '204') {
            emit('updateTags')
            message.info(tag.value.name + ' 标签已删除！')
        }
    })
}
</script>

<style scoped>
.tag-item {
    flex: 20%;
}

.tag-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
</style>
